<template>
  <div class="top">
    <el-tag
      v-for="(tag, index) in tags"
      :key="index"
      :class="tagIndex==index ? 'el-tag-select' : ''"
      closable
      @close="handleClose(index)"
      @click="changeTab(tag,index)"
    >
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    let thus = reactive({
      tags: store.state.score.tabList,
      tagId:store.state.score.nowId,
      tagIndex:0,
    });
    console.log(thus);

    const handleClose = (index) => {
      // thus.tags.splice(index, 1);
      store.commit("score/tabListDel", index);
    };
    const changeTab = (tag,index) => {
      thus.tagId = tag.id;
      thus.tagIndex = index;
      store.commit("score/setNowIndex",tag)
    }

    return {
      ...toRefs(thus),
      handleClose,changeTab
    };
  },
};
</script>

<style lang="less" scoped>
.top {
  background-color: rgba(255, 255, 255, 0.3);
  padding-left:5px ;
  .el-tag {
    --el-tag-border-color: none;
    // --el-tag-hover-color: none;
    // --el-tag-text-color: none;
    --el-tag-border-color: none;
    // --el-tag-text-color: none;
    border-width: 0;
    border-style: none;
    border-radius: 0%;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 15px 0;
    width: 120px;
    margin: 0 -10px;
    margin-top: 10px;
    // margin: 10px 5px;
    font-size: 18px;
    // border: 1px solid #ccc;
    -webkit-mask-image: 
    url(),
    url(),
    url("../../assets/下载.svg");
    -webkit-mask-size: 15px 28px, 15px 28px, calc(100% - 30px) calc(100% + 17px);;
    -webkit-mask-position: right bottom, left bottom, center top;
    -webkit-mask-repeat: no-repeat;
    color: #333;
  }
  .el-tag:hover{
     cursor: pointer;
    background-color: rgba(64, 158, 255,.1);
  }
  .el-tag-select {
    background-color: rgba(64, 158, 255,.1);
    color:#409eff;
    // border: 1px solid #409eff;
    // border-bottom: none;
  }
  margin-bottom: 0;
}
</style>